@esui-filter-line-height: 2;

@esui-filter-item-padding: .3em .5em;
@esui-filter-item-margin: 0 .5em;
@esui-filter-item-color: #333;

@esui-filter-item-hover-color: #FFF;
@esui-filter-item-hover-background: #96A9B5;

@esui-filter-item-active-background: #698496;
@esui-filter-item-active-color: #FFF;

@esui-filter-remove-color: @esui-palette-muted-color;

@esui-filter-cmd-color: #FFF;
@esui-filter-cmd-hover-color: #FFF;
@esui-filter-cmd-background: #7BC2F1;
@esui-filter-cmd-hover-background: #7BC2F1;

.@{ui-class-prefix}-filter,
.@{ui-class-prefix}-filterresult {
    line-height: @esui-filter-line-height;
    display: block;
}

.@{ui-class-prefix}-filter-items-panel,
.@{ui-class-prefix}-filterresult-items-panel {
    .inline-block();
}

.@{ui-class-prefix}-filter-item,
.@{ui-class-prefix}-filterresult-item,
.@{ui-class-prefix}-filter-item-cmd {
    .inline-block();
    cursor: pointer;
    margin: @esui-filter-item-margin;
    padding: @esui-filter-item-padding;
    line-height: 1em;
    white-space: nowrap;
}

.@{ui-class-prefix}-filter-item,
.@{ui-class-prefix}-filterresult-item {
    color: @esui-filter-item-color;
    &:hover {
        background: @esui-filter-item-hover-background;
        color: @esui-filter-item-hover-color;
    }
}

.@{ui-class-prefix}-filter-item-active,
.@{ui-class-prefix}-filterresult-item {
    background: @esui-filter-item-active-background;
    color: @esui-filter-item-active-color;
    &:hover {
        background: @esui-filter-item-active-background;
        color: @esui-filter-item-active-color;
    }
}

.@{ui-class-prefix}-filter-item-cmd {
    background: @esui-filter-cmd-background;
    color: @esui-filter-cmd-color;
    &:hover {
        color: @esui-filter-cmd-hover-color;
        background: @esui-filter-cmd-hover-background;
        text-decoration: none;
    }
}

.@{ui-class-prefix}-filter-remove {
    &:before {
        .eicons-icon-content(remove);
        margin-left: .5em;
        color: @esui-filter-remove-color;
    }
}

.@{ui-class-prefix}-filter-item {
    &:hover {
        .@{ui-class-prefix}-filter-remove {
            &:before {
                color: @esui-filter-item-color;
            }
        }
    }
}

.@{ui-class-prefix}-filter-item-active {
    .@{ui-class-prefix}-filter-remove {
        &:before {
            color: @esui-filter-item-active-color;
        }
    }

    &:hover {
        .@{ui-class-prefix}-filter-remove {
            &:before {
                color: @esui-filter-item-active-color;
            }
        }
    }
}

.@{ui-class-prefix}-filterresult-remove {
    &:before {
        .eicons-icon-content(remove);
        margin-left: .2em;
    }
}
